<template>
  <view class="container">

    <view class="container-inner">

      <view class="title">
        修改昵称
      </view>
      <view class="desc">
        用户昵称长度不能超过30个字符
      </view>

      <view class="input">
        <u--input
            v-model="inputNickname"
            @change="handleNicknameChange"
            placeholder="请输入您的昵称"
            border="bottom"
            :customStyle="{
              'padding-left': '50rpx',
              'padding-right': '50rpx'
            }"
            clearable
        ></u--input>
      </view>


      <view class="submit">
        <u-button @click="handleUpdateNickname" type="primary"
                  :color="btnColor"
                  :customStyle="{'padding-left': '100rpx',
                      'padding-right': '100rpx'}"
                  text="保存"></u-button>
      </view>

    </view>
  </view>
</template>

<script>
import {updateUserInfo} from "@/config/api";
import {checkLogin, getLoginUserInfo} from "@/config/util/common";

export default {
  data() {
    return {
      btnColor: 'rgb(170,170,170)',
      btnColorTrue: 'rgb(240, 169, 160)',
      btnColorFalse: 'rgb(170,170,170)',

      inputNickname: "",
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  methods: {

    //输入昵称
    handleNicknameChange() {

      if (this.inputNickname) {
        this.btnColor = this.btnColorTrue;
      } else {
        this.btnColor = this.btnColorFalse;
      }
    },

    //修改昵称
    handleUpdateNickname() {

      if (!checkLogin(true)) {
        return;
      }

      if(!this.inputNickname){
        uni.$u.toast("昵称不能为空")
        return;
      }

      updateUserInfo({
        userId: this.userInfo.userId,
        nickName: this.inputNickname,
        avatar: null,
      }).then(res => {
        uni.$u.toast("修改成功")
        //刷新全局登录的用户
        getLoginUserInfo()

        uni.navigateBack();
      })
    }
  }
}
</script>

<style lang="scss">

.container {
  justify-content: unset;
  flex-direction: column;
  align-items: unset;


  .container-inner {
    //width: calc(100% - 100rpx);
    padding: unset;
    padding-top: 50rpx;

    .title {
      padding-left: 50rpx;
      padding-right: 50rpx;
      font-size: 18px;
    }

    .desc {
      padding-left: 50rpx;
      padding-right: 50rpx;
      font-size: 12px;
      color: $sys-color-grey-170;
    }

    .input {
      margin-top: $sys-margin-top-50;
      border-bottom: 1px solid $sys-color-grey-242;
    }

    .submit {
      padding-left: 50rpx;
      padding-right: 50rpx;
      margin-top: $sys-margin-top-150;
    }
  }

}
</style>
